<script lang="ts" setup>
import { get } from "@/utils/http";
import url from "@/assets/images/nana.webp";
import { CollectionTag } from "@element-plus/icons-vue";
import { Category, PhotoGraph } from "@/typings";
import useDayjs from "../../../hooks/useDayjs";
import router from "@/router";
const select = ref(0);
const change = (value: number) => {
  if (!value) {
    ElMessage.warning("取消收藏");
    return;
  }
  ElMessage.success("收藏成功");
};
const route = useRoute();
const loading = ref(true);
const imgInfo = ref<PhotoGraph>();
const enum Color {
  success = "success",
  warning = "warning",
  info = "info",
  primary = "primary",
  danger = "danger",
}
onBeforeMount(async () => {
  const data = await get({ url: `/photograph/${route.params.id}` });
  console.log(data);
  imgInfo.value = data.data;
  console.log(imgInfo.value);
  imgInfo.value?.category.forEach((_: any) => {
    if (_.classification) {
      itemCategory.value.push({
        classification: _.classification,
        color: Color.warning,
        check: true,
      });
    }
  });
  console.log(imgInfo.value);
  loading.value = false;
});

const itemCategory = ref<
  {
    classification: string;
    color: Color;
    check: boolean;
  }[]
>([]);
onMounted(() => {});
const changeStatus = (value: string) => {
  const idx = itemCategory.value.filter((_) => {
    return _.classification == value;
  });
  if (!idx.length) return;
  router.push({
    path: "/container",
    query: {
      c: idx[0].classification,
    },
  });
};
</script>
<template>
  <div class="detail">
    <PicxLoading v-if="loading" />
    <div v-else class="flex flex-col">
      <div class="flex justify-around" style="width: 80vw">
        <div v-if="imgInfo" class="column">
          {{ useDayjs(imgInfo?.createTime!) }}
          <el-image
            :src="imgInfo.url"
            fit="cover"
            :preview-src-list="[imgInfo.url]"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
          >
            <template #placeholder>
              <el-image :src="url" />
            </template>
          </el-image>
          <el-rate
            v-model="select"
            :max="1"
            clearable
            :icons="{ 1: CollectionTag }"
            :void-icon="CollectionTag"
            :colors="['#99A9BF']"
            :void-color="'#ECF0F1'"
            @change="change"
            :size="'large'"
          />
        </div>
        <div class="column">
          <div class="container">
            <div class="title">{{ imgInfo?.refer }}</div>
            <TagColumn>
              <div class="category" v-if="itemCategory.length">
                <el-space wrap>
                  <el-check-tag
                    v-for="(item, index) in itemCategory"
                    :key="index"
                    v-model:checked="item.check"
                    :type="item.color"
                    hit
                    :effect="'dark'"
                    @change="changeStatus(item.classification)"
                    round
                    class="el-check-tag el-check-tag--warning"
                  >
                    {{ item.classification }}
                  </el-check-tag>
                </el-space>
              </div>
            </TagColumn>
          </div>
        </div>
      </div>
      <PicxComment />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.detail {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.el-image {
  max-width: 480px;
}
.column {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}
.category {
  display: flex;
  max-width: 400px;
  justify-content: space-around;
  align-items: center;
}
</style>
